<div id="alluser-body" class="">
    <div class="alluser-action-panel">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">部门:</label>
                <div class="layui-input-block" id="department-btnpanel">
                    <button class="layui-btn" btn-model="department" value="" type="button">全部</button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色:</label>
                <div class="layui-input-block" id="role-btnpanel">
                    <button class="layui-btn" btn-model="role" value="" type="button">全部</button>
                </div>
            </div>
            <div class="sex-status-panel">
                <div class="layui-form-item">
                    <label class="layui-form-label">性别:</label>
                    <div class="layui-input-block" id="sex-btnpanel">
                        <button class="layui-btn" btn-model="sex" value="" type="button">全部</button>
                        <button class="layui-btn layui-btn-primary" value="" btn-model="sex" type="button">男</button>
                        <button class="layui-btn layui-btn-primary" value="" btn-model="sex" type="button">女</button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状态:</label>
                    <div class="layui-input-block" id="status-btnpanel">
                        <button class="layui-btn" btn-model="status" value="" type="button">全部</button>
                        <button class="layui-btn layui-btn-primary" value="" btn-model="status"
                            type="button">在职</button>
                        <button class="layui-btn layui-btn-primary" value="" btn-model="status"
                            type="button">离职</button>
                        <button class="layui-btn layui-btn-primary" value="" btn-model="status"
                            type="button">请假</button>
                    </div>
                </div>
            </div>
            <div class="flex-inline-panel">
                <div class="layui-form-item">
                    <label class="layui-form-label">入职时间:</label>
                    <div class="layui-input-block group-btn">
                        <input type="text" class="layui-input" id="joinjobtime" placeholder="开始时间 - 结束时间">
                        <button class="layui-btn layui-btn-primary" type="button"><span
                                class="layui-icon layui-icon-search"></span></button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关键字:</label>
                    <div class="layui-input-block group-btn">
                        <input type="text" class="layui-input" placeholder="请输入搜索关键字">
                        <button class="layui-btn layui-btn-primary" type="button"><span
                                class="layui-icon layui-icon-search"></span></button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- <table id="Table_All_User" class="layui-hide" lay-filter="users"></table> -->
</div>
<script>
    layui.use(['form', 'laydate'], function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#joinjobtime'
            , range: true
        });
        $.post(api.department.getAllDepartment, function (res) {
            $.each(res.data, function (index, item) {
                $("#department-btnpanel").append('<button class="layui-btn layui-btn-primary" btn-model="department" value="' + item.department_id + '" type="button">' + item.department_name + '</button>');
            });

        }, 'json');
        $.post(api.role.get, function (res) {
            $.each(res.data, function (index, item) {
                $("#role-btnpanel").append('<button class="layui-btn layui-btn-primary" btn-model="role" value="' + item.role_id + '" type="button">' + item.role_name + '</button>');
            });

        }, 'json');
    });
    $("#alluser-body").on("click", "[btn-model]", function () {
        var btnModel = $(this).attr("btn-model");
        $("[btn-model='" + btnModel + "']").addClass("layui-btn-primary");
        $(this).removeClass("layui-btn-primary");
    });
</script>
<script type="text/html" id="userAct">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="userHeader">
    <img src="{{d.user_header}}" style="width:40px;height:40px">
</script>
<script type="text/html" id="userSex">
    {{# if(d.user_sex == 1){ }}
    <span class="layui-badge layui-bg-blue">男</span>
    {{# }else{ }}
    <span class="layui-badge">女</span>
    {{# } }}
</script>
<script type="text/html" id="userStatus">
    {{# if(d.user_status == 1){ }}
    <span class="layui-badge layui-bg-blue">在职</span>
    {{# }else if(d.user_status == 2){ }}
    <span class="layui-badge layui-bg-orange">事假</span>
    {{# }else if(d.user_status == 3){ }}
    <span class="layui-badge layui-bg-black">病假</span>
    {{# }else{ }}
    <span class="layui-badge">离职</span>
    {{# } }}
</script>
<script type="text/html" id="user_address">
{{ d.city_name + '   ' + d.area_name }} 
</script>
<script>
    renderTable({
        elem: "#alluser-body",
        model: "users",
        pk: "user_id",
        tableApi: api.user.getAllUserByPage,
        updateApi: api.user.editUser,
        delApi: api.user.delUser,
        cols: [
            { field: 'user_id', title: '编号', width: 80, sort: true, fixed: 'left' }
            , { field: 'user_header', title: '头像', width: 75, toolbar: '#userHeader' }
            , { field: 'user_sex', title: '性别', width: 75, toolbar: '#userSex' }
            , { field: 'user_name', title: '昵称', edit: 'text', sort: true }
            , { field: 'user_age', title: '年龄', width: 75, sort: true }
            , { field: 'department_name', title: '部门', sort: true }
            , { field: 'user_phone', title: '手机', edit: 'text', sort: true }
            , { field: 'addree_id', title: '来自', sort: true, toolbar: '#user_address' }
            , { field: 'role_name', title: '角色', width: 100, sort: true }
            , { field: 'user_ip', title: 'ip', sort: true }
            , { field: 'user_status', title: '状态', width: 75, sort: true, toolbar: '#userStatus' }
            , { fixed: 'right', width: 165, align: 'center', toolbar: '#userAct' }
        ],
        delFunction: function (obj) {
            layer.msg("无权删除");
        },
        editFunction: function (obj) {
            var data = obj.data;
            updateQueryStringParameter('user_id', data.user_id);
            SetPopup('用户信息-' + data.user_name, 'UserDetail', { area: '1040px' });
        }
    });
</script>
<style>
    .sex-status-panel {
        display: flex;
        flex-wrap: nowrap;
    }
</style>